<template>
  <div v-loading="loading" class="tree-list">
    <template v-if="!comId">
      <div>请先选择公司...</div>
    </template>
    <template v-else-if="!TreeData">
      <div>厂站列表加载失败, 请稍后再试!</div>
    </template>
    <TreeData :treedata="TreeData" />
  </div>
</template>

<script>
import TreeData from '../../data/components/TreelData'
export default {
  name: "TreeList",
  components: {
    TreeData
  },
  props: {
    path: {
      type: Array,
      default() {
        return [];
      }
    },
    showLevel: {
      type: Number,
      default: 3
    },
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      searchName: "",
      stationId: null,
      folders: null,
      selectPath: null,
      filters: null,
      TreeData: null
    };
  },
  computed: {
    rets() {
      if (!this.stationId) {
        return this.folders;
      }
      return (
        this.folders &&
        this.folders.filter(f => {
          if (f.pkid === this.stationId) {
            this.$set(f, "isOpen", true);
            return true;
          } else return false;
        })
      );
    },
    comId() {
      return this.$store.getters.comId;
    }
  },
  watch: {
    path: {
      handler(v) {
        this.selectPath = v;
      },
      immediate: true
    }
  },
  created() {
    if (this.comId) {
      this.loading = true;
      this.NodeTree().then(() => {
        this.loading = false;
      });
    }
  },
  methods: {
    // 获取树状数据
    NodeTree() {
      return this.$axios
        .get("/fire/nodes/findNodeTree/" + this.$store.getters.comId)
        .then(res => {
          if (res.code === 1) {
            this.TreeData = res.data
          } else {
            throw res.msg;
          }
        })
        .catch(e => {
          this.$message.error(e);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-list {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  box-sizing: border-box;
  padding: 16px;
  color: #7c8ca5;
}
.search {
  background: #27354e;
  padding: 10px;
  margin: -16px;
  margin-bottom: 0;
  // .item {
  //   margin-bottom: 20px;
  // }
}
>>> .el-input {
  .el-input__inner {
    background: #222c3c;
    border: 0;
  }
}
</style>
